<div id="column-left">
    <div class="box category">
  <div class="box-heading">Categories</div>
  <div class="box-content">
    <div class="box-category">
      <ul>
              <?php $cat=main_menu();
			  	while($row_cat=mysql_fetch_assoc($cat)){
			  ?>
                <li>
                    <a href="#"><?php echo $row_cat['title']?> </a>
                            </li>
                            <?php }?>
              </ul>
    </div>
  </div>
</div>

<script type="text/javascript">
var banner = function() {
	$('#banner0').cycle({
		before: function(current, next) {
			$(next).parent().height($(next).outerHeight());
		}
	});
}

setTimeout(banner, 2000);

</script>    <div style="clear:both"></div>
</div>
 
<div id="content"><h1>Books</h1><span>  <div class="breadcrumb">
        <a href="http://template-preview.com/opencart/300111402/index.php?route=common/home">Home</a>
         » <a href="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61">Books</a>
      </div>
  
    <div class="category-info">
            <p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a 
mauris eu eros commodo accumsan. Nunc scelerisque blandit risus, quis 
feugiat mi elementum a. Vestibulum consequat luctus lorem eget euismod. 
Donec auctor scelerisque bibendum. Cras convallis convallis turpis, 
elementum posuere erat convallis ut. Duis dui dui, elementum et mattis 
sed, vulputate vulputate metus. Phasellus consequat laoreet luctus.</p>
      </div>
        <div class="product-filter">
    <div class="display"><b>Display:</b> List <b>/</b> <a class="grid" onClick="display('grid'); ">Grid</a></div>
    <div class="limit"><b>Show:</b>
      <select onChange="location = this.value;">
                        <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;limit=15" selected="selected">15</option>
                                <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;limit=25">25</option>
                                <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;limit=50">50</option>
                                <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;limit=75">75</option>
                                <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;limit=100">100</option>
                      </select>
    </div>
    <div class="sort"><b>Sort By:</b>
      <select onChange="location = this.value;">
                        <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;sort=p.sort_order&amp;order=ASC" selected="selected">Default</option>
                                <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;sort=pd.name&amp;order=ASC">Name (A - Z)</option>
                                <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;sort=pd.name&amp;order=DESC">Name (Z - A)</option>
                                <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;sort=p.price&amp;order=ASC">Price (Low &gt; High)</option>
                                <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;sort=p.price&amp;order=DESC">Price (High &gt; Low)</option>
                                <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;sort=rating&amp;order=DESC">Rating (Highest)</option>
                                <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;sort=rating&amp;order=ASC">Rating (Lowest)</option>
                                <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;sort=p.model&amp;order=ASC">Model (A - Z)</option>
                                <option value="http://template-preview.com/opencart/300111402/index.php?route=product/category&amp;path=61&amp;sort=p.model&amp;order=DESC">Model (Z - A)</option>
                      </select>
    </div>
  </div>
  
  <div class="product-list">
        <?php // Begin product
			if(isset($_GET['catid'])) $catid=$_GET['catid'];
			$pro=book_cat($catid);
			while($row_pro=mysql_fetch_assoc($pro)){
				//Lay hinh
				$urlHinh=getParamsK($row_pro['images'], "image_intro");
				
		?>
        <div><div class="left_"><div class="image"><a href="#"><img width="141" height="208" style="margin-top:-14px" src="<?php echo $urlHinh?>" title="<?php echo $row_pro['alias']?>" alt="<?php echo $row_pro['alias']?>"></a></div></div><div class="right_">  <div class="name"><a href="http://template-preview.com/opencart/300111402/index.php?route=product/product&amp;path=61&amp;product_id=31"><?php echo $row_pro['title']?></a></div>  <div class="description">
	<?php
    	echo $row_pro['introtext'];
	?></div>
       <!-- <div class="price">
                $96                        <br>
        <span class="price-tax">Ex Tax: $80</span>
              </div>  
              <div class="wishlist"><a onClick="addToWishList('31');">Add to Wish List</a></div>  
              <div class="compare"><a onClick="addToCompare('31');">Add to Compare</a></div>  
              <div class="cart"><a onClick="addToCart('31');" class="button"><span>Add to Cart</span></a></div>
          -->   
          <div class="cart"><a href="#" class="button"><span>Chi tiết</span></a></div>
              </div></div>
    
    <?php }// End product?>
        
        
        
        
        

        
      </div>
  <div class="pagination"><div class="results">Showing 1 to 7 of 7 (1 Pages)</div></div>
        <div style="clear:both; padding-bottom:1px"></div></span></div>
<script type="text/javascript">
function display(view) {
	if (view == 'list') {
		$('.product-grid').attr('class', 'product-list');
		
		$('.product-list > div').each(function(index, element) {
			html  = '<div class="left_">';
			var image = $(element).find('.image').html();
			
			if (image != null) { 
				html += '<div class="image">' + image + '</div>';
			}			
			html += '</div>';			
			
			html += '<div class="right_">';
			
			html += '  <div class="name">' + $(element).find('.name').html() + '</div>';
			html += '  <div class="description">' + $(element).find('.description').html() + '</div>';
			
			var price = $(element).find('.price').html();
			var wishlist = $(element).find('.wishlist').html();
			var compare = $(element).find('.compare').html();
			var cart = $(element).find('.cart').html();
			if (price != null) {
				html += '<div class="price">' + price  + '</div>';
			}
				//html += '  <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';	
				//html += '  <div class="compare">' + $(element).find('.compare').html() + '</div>';			
				html += '  <div class="cart">' + $(element).find('.cart').html() + '</div>';
					
			
			
			
			var rating = $(element).find('.rating').html();
			
			if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
				
			html += '</div>';

						
			$(element).html(html);
		});		
		
		$('.display').html('<b>Display:</b> List <b>/</b> <a class="grid" onclick="display(\'grid\');">Grid</a>');
		
		$.cookie('display', 'list'); 
	
	} else {
		$('.product-list').attr('class', 'product-grid');
		$('.product-grid > div').each(function(index, element) {
			html = '';
			
			html += '<div class="name">' + $(element).find('.name').html() + '</div>';

			var image = $(element).find('.image').html();
			if (image != null) {
				html += '<div class="image">' + image + '</div>';
			}
			
			
			html += '<div class="open_content "><div class="name">' + $(element).find('.name').html() + '</div>';
			html += '<div class="description">' + $(element).find('.description').html() + '</div>';
			//html += '<div class="description"></div>';
			var price = $(element).find('.price').html();
			
			if (price != null) {
				html += '<div class="price">' + price  + '</div>';
			}
			
			var rating = $(element).find('.rating').html();
			
			if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
						
			
			//html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
			//html += '<div class="compare">' + $(element).find('.compare').html() + '</div> ';
			html += '<div class="cart">' + $(element).find('.cart').html() + '</div></div>'<!-- end open_content -->';
			
			$(element).html(html);
		});	
					
		$('.display').html('<b>Display:</b> <a onclick="display(\'list\');">List</a> <b>/</b> Grid');
		
		$.cookie('display', 'grid');
		$(".description").css("visibility","hidden");
		$(".name a").css("font-size","14px");
		//document.location.reload(true)
		$(".open_content").css("display","");
	}
}

view = $.cookie('display');

if (view) {
	display(view);
} else {
	display('list');
}

//--></script> 
<div style="clear:both"></div>
